<template>
	<div>
		<div>
			<el-table border style="width: 100%" :data="tableDataList">
				<el-table-column prop="username" align="center" label="姓名">
				</el-table-column>
				<el-table-column prop="account" align="center" label="账号">
				</el-table-column>
				<el-table-column prop="department" align="center" label="科室">
				</el-table-column>
				<el-table-column prop="type" align="center" label="类型">
				</el-table-column>
				<el-table-column prop="status" align="center" label="状态">
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button @click="editUserInfo(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 修改用户信息的弹框 -->
		<el-dialog title="账号编辑" :visible.sync="editUserInfoDialogVisible" width="40%">
			<el-form label-position="right" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="账号" prop="name" v-model="editUserInfoForm.account"><el-input></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name"><el-input v-model="editUserInfoForm.username"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="手机" prop="name"><el-input v-model="editUserInfoForm.phone"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" prop="name"><el-input v-model="editUserInfoForm.role"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="状态" prop="name"><el-input v-model="editUserInfoForm.status"></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手写签名" prop="name" v-model="editUserInfoForm.autograph"><el-input></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="科室" prop="name" v-model="editUserInfoForm.department"><el-input ></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="关联科室" prop="name"><el-input v-model="editUserInfoForm.relationDepartment"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="病区" prop="name"><el-input></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="虚拟病房" prop="name"><el-input></el-input></el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editUserInfoDialogVisible = false">提交</el-button>
				<el-button @click="editUserInfoDialogVisible = false">重置密码</el-button>
				<el-button @click="editUserInfoDialogVisible = false">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"Account",
		data(){
			return{
				value: '',
				searchKeyWord:'',
				tableDataList: [{
						username: '张三',
						account: '3118446488',
						department: '系统科室',
						type: '护士',
						status: '有效'
					},
					{
						username: '李四',
						account: '15727547121',
						department: '内分泌科室',
						type: '护士',
						status: '有效'
					}
				],
				editUserInfoForm: {
					username: '',
					account: '',
					department: '',
					type: '',
					status: ''
				},
				editUserInfoDialogVisible: false
			}
		},
		methods:{
			// 编辑用户信息
			editUserInfo(userInfo) {
				this.editUserInfoForm = Object.assign({},userInfo);
				this.editUserInfoDialogVisible = true;
			},
		}
	}
</script>

<style>
</style>
